<template>
	<view>
		<uni-search-bar @confirm="search" @clear="clear" placeholder="请输入搜索标题" clearButton="always" cancelButton="none"></uni-search-bar>
		<scroll-view  :style="{height:navHeight+'px'}" class="sv"
						:scroll-top="0"
		                   scroll-y
						   lower-threshold="50"
		                   :scroll-with-animation='true'
		                   @scrolltolower="handleScrollToLower">
		<view v-if="list.length>0">
			<uni-list :border="true" v-for="(item, index) in list" >
				<uni-list-chat :title="item.title" :avatar="apiurl+item.img" noteIcon="icon-kaishishijian" :note="item.beginTime" note2Icon="icon-jieshushijian" :note2="item.endTime" note3Icon="location" :note3="item.location" :showTime="false" :time="item.createTime" :clickable="true" @click="navTo('/pages/activity/detail?id='+item.id+'&title='+item.title)"></uni-list-chat>
			</uni-list>
			<view v-if="isBottom" class="align-center margin-bottom-15">
				<text>没有更多数据了！</text>
			</view>
		</view>
		<view v-else class="align-center">
			<text>暂无数据！</text>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryId:'',
				apiurl:'',
				list:[],
				pagination:{},
				pH:0,
				navHeight:0,
				isBottom:false
			}
		},
		onReady() {
			let that=this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that._data.pH=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH=uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data=>{
						let pH=that._data.pH; 
						that._data.navHeight=pH-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})
		},
		onLoad:function(option){
			uni.setNavigationBarTitle({
			    title:option.name
			})
			console.log(option)
			this.categoryId = option.categoryId
		    this.apiurl = getApp().globalData.staticUrl
			//加载活动
			// this.$http.get('/temple.activity/templeActivity/api/list', {
			// 	'sysOrgCode':getApp().globalData.orgCode,
			// 	'categoryId':this.categoryId
			// }).then((res) => {
			// 	this.list = res.data.result.records;
			// })
			this.getList()
		},
		methods: {
			search:function(res){
				var title = "*"+res.value+"*"
				this.$http.get('/temple.activity/templeActivity/api/list', {
					"title":title,
					'categoryId':this.categoryId
				}).then((res) => {
					console.log(res)
					this.list = res.data.result.records;
				})
			},
			clear:function(res){
				this.$http.get('/temple.activity/templeActivity/api/list', {
					'categoryId':this.categoryId
				}).then((res) => {
					this.list = res.data.result.records;
				})
			},
			//   分页
			handleScrollToLower () {
				console.log("scroll to bottom!")
				this.getList()
			},
			getList(){
				var params = {
					'categoryId':this.categoryId
				}
				//首次加载pagination没有值
				if(this.pagination.current && this.pagination.size && this.pagination.total){
					params.pageNo = this.pagination.current;//开始页码
					params.pageSize = this.pagination.size//页数
					if(params.pageNo*params.pageSize < this.pagination.total){
						params.pageNo = params.pageNo+1
						this.getData(params)
					}else{
						this.isBottom = true;
					}
				}else{
					this.getData(params)
				}
				
			},
			getData(params){
				this.$http.get('/temple.activity/templeActivity/api/list', params
				).then((res) => {
					this.pagination.current = res.data.result.current
					this.pagination.size = res.data.result.size
					this.pagination.total = res.data.result.total
					if(this.pagination.current > 1){
						this.list = [...this.list,...res.data.result.records]
					}else{
						this.list = res.data.result.records;
					}
				})
			}
		}
	}
</script>

<style>

</style>
